<template>
	<view :style="{'padding-top':CustomBar+'rpx'}">
		<view class="cuIcon-unfold justify-end padding-right text-bold" style="font-size: 40rpx;"@click="home()"></view>
		<view class="user_head padding">
			<view class="flex align-center" @click="userInfoMen()">
				<image :src="userInfo.avatar" mode="aspectFill" class="head_image"></image>
				<view class="margin-left">
					<view class="align-center" style="width: 400rpx;">
						<view class=" text-bold  text-lg one_overflow">{{userInfo.userName}}</view>
						<image :src="userInfo.gender==0?'/static/user/imgnu.png':'/static/user/imgnan.png'"
							mode="widthFix" class="head_sex"></image>
					</view>
					<view class="head_id">ID:{{userInfo.mobile}}</view>
				</view>
			</view>
			<view class="head_vip padding-top" @click.stop="$tools.push('/pages/userInfo/modules/vip')">
				<view class="flex align-center justify-between padding-lr" style="width: 100%;">
					<view class="align-center">
						<text class="vip_text margin-left">
							VIP |
						</text>
						<text class="margin-left">开通VIP享大额钻石</text>
					</view>
					<view class="vip_button margin-right">
						立即开通
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-between padding text-white" @click.stop="$tools.push('/pages/userInfo/modules/balance/balance')">
			<view class="earnings_body align-center justify-end padding-right-xl">
				<view class="">
					<view class="text-center">
						<view class="text-lg">我的收益</view>
						<view>
							<text class="text-bold text-xl">￥</text>
							<text class="text-lg">{{userInfo.money || '0.00'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="invite_body" @click.stop="$tools.push('/pages/plugins/share/share')"></view>
		</view>
		<view class="padding solid-bottom align-center justify-between " 
		v-for="(item,index) in plugins" :key="index" @click="pluginsMen(item)">
				<view>
					<image :src="item.icon" mode="" class="plugins_icon"></image>
					<text class="margin-left">{{item.title}}</text>
				</view>
				<view class="cuIcon-right text-gray"></view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/common/path.js'
	export default {
		data() {
			return {
				titleList: [{
						title: "求聊",
						id: 1
					},
					{
						title: "抢聊",
						id: 2
					},
					{
						title: "广场",
						id: 3
					}
				],
				plugins:[
					{
						title:'相册',
						icon:'/static/user/imgxiace.png',
						id:1,
						url:'/pages/userInfo/modules/photoAlbum/photoAlbum'
					},
					{
						title:'我的VIP',
						icon:'/static/user/imghuanggan.png',
						id:2,
						url:'/pages/userInfo/modules/vip'
					},
					{
						title:'意见反馈',
						icon:'/static/user/imgyijian.png',
						id:3,
						url:'/pages/userInfo/modules/feedback'
					},
					{
						title:'设置',
						icon:'/static/user/imgshezhi-1.png',
						id:4,
						url:'/pages/userInfo/modules/setting'
					}
				],
				titleActiveNum: 0, //默认选中状态
				userInfo:{},//用户信息
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				this.getUserInfo()
			}
		},
		methods: {
			//首页跳转
			home(){
				uni.switchTab({
					url:'/pages/square/index'
				})
			},
			
			//获取用户信息
			getUserInfo(){
				let data  ={
					id:uni.getStorageSync('userInfo').id
				}
				this.Http.POST(getUserInfo,data)
				.then((res)=>{
					if(res.code == 0 ){
						console.log('[用户信息]',res);
						this.userInfo = res.data
						uni.setStorageSync('userInfo',res.data)
					}
				})
			},
			
			//跳转
			pluginsMen(item){
				uni.navigateTo({
					url:item.url
				})
			},
			//设置页面跳转
			userSetting(event){
				uni.navigateTo({
					url:'modules/setting'
				})
			},
			//个人资料
			userInfoMen(){
				uni.navigateTo({
					url:'/pages/userInfo/modules/userInfo'
				})
			}
		},
		computed: {},
		components: {}
	}
</script>

<style>
.user_head {
		width: 750rpx;
		height: 449rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FCE7D4 100%);
		border-radius: 0% 0 40% 40%;
		opacity: 1;
		overflow: hidden;
		position: relative;
	}

	.head_image {
		width: 150rpx;
		height: 150rpx;
		background: rgba(0, 0, 0, 0);
		border-radius: 50%;
		opacity: 1;
		border: 8rpx solid white;
	}

	.head_id {
		width: 250rpx;
		height: 38rpx;
		background: #FDE0BB;
		border-radius: 99rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 22rpx;
		margin-top: 30rpx;
	}

	.head_sex {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.head_vip {
		width: 700rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		background: linear-gradient(180deg, #FDD1A0 0%, #E8CDB0 100%);
		position: absolute;
		bottom: 0rpx;
	}

	.vip_text {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}

	.vip_button {
		width: 160rpx;
		height: 54rpx;
		background: #EAA019;
		opacity: 1;
		line-height: 54rpx;
		text-align: center;
		border-radius: 99rpx;
	}

	.earnings_body {
		width: 330rpx;
		height: 178rpx;
		background-size: 100% 100%;
		background-image: url(/static/user/imgshouyi.png);
		opacity: 1;
		border-radius: 12rpx;
	}

	.invite_body {
		width: 330rpx;
		height: 178rpx;
		/* background: linear-gradient(180deg, #F3B57C 0%, #F8D78A 100%); */
		opacity: 1;
		/* border-radius: 12rpx; */
		background-image: url(/static/user/imgyaoqing-1.png);
		background-size: 100% 100%;
	}

	/* 分类图标 */
	.plugins_icon {
		width: 40rpx;
		height: 40rpx;
	}


	.swiper_image {
		width: 710rpx;
		height: 160rpx;
		background: #FFAA1C;
		border-radius: 10rpx;
		margin: 0 auto;
	}
</style>
